<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{ cssStyle }}
  </head>

  <body id="index" class="home">
    <header id="banner" class="body"> 
    <h1>McCanada</h1>
    <h2>I'm enjoyin' it</h2>

    <nav> 
    <ul> 
      <li><a href="/health">Home</a></li> 
    </ul> 
    </nav> 
    </header> 

    <section id="content" class="body">	
    <table>
      <tr>
        <td colspan="3">McCanada</td>
      </tr>
      <tr>
        <td colspan="3">I'm enjoyin' it</td>
      </tr>
      {% for item in items %}
      <tr>
        <td>{{ item.name }}</td><td>...</td><td>{{ item.cost }}</td>
      </tr>
      {% endfor %}
      <tr>
        <td>---</td><td></td><td>---</td>
      </tr>
      <tr>
        <td>Total</td><td>...</td><td>{{ total }}</td>
      </tr>
      <tr>
        <td>HST</td><td>...</td><td>{{ tax }}</td>
      </tr>
      <tr>
        <td>Grand Total</td><td>...</td><td>{{ gtotal }}</td>
      </tr>
      <tr>
        <td colspan="3">
          Take this QR-code to your nearest McCanada to pick up your order
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <img src="/static/qrcode.png" alt="qrcode"/>
        </td>
      </tr>
      <tr>
        <td colspan="3">See You Soon</td>
      </tr>
    </table>
    </section>

    <footer id="contentinfo" class="body">
    McCanada 311
    </footer>


  </body>
</html>
